import React from 'react';

// 引入tabbar组件
import Tabbar from './pages/tabbar';
// 引入城市列表页组件
import CityList from './pages/cityList';
// 地图找房
import MapFound from './pages/mapFound'

// 配置路由--引入路由组件
import { HashRouter, Redirect, Route } from "react-router-dom";

// 获取当前定位城市业务 需要的引入
// 1.引入 react-redux中 连接 当前组件和store的对象 connect
import { connect } from "react-redux";
// 4.1 引入actionCreator中的获取名字的方法
import { getCityNameCreate } from "./store/actionCreator"


class App extends React.Component {

  componentDidMount() {
    // 获取当前定位城市业务 代码块
    this.props.getCityName();
  }

  render() {
    return (
      <div>
        {/* 配路由 */}
        {/* 获取当前定位城市业务bug3 增加条件渲染，等有了当前城市后才渲染其他页面 */}
        {this.props.cityName && <HashRouter>
          {/* 增加 地址为"/"的 重定向 */}
          <Route path="/" exact>
            <Redirect to="/home"></Redirect>
          </Route>
          {/* 配置首页的路由，内容使用Tabbar组件 */}
          <Route path="/home" component={Tabbar}></Route>
          {/* 城市列表页 */}
          <Route path="/cityList" component={CityList}></Route>
          {/* 地图找房页 */}
          <Route path="/mapFound" component={MapFound}></Route>
        </HashRouter>}
      </div>
    )
  }
}

// 获取当前定位城市业务 代码块
// 2.映射对象 将仓库(store)中的数据映射到  当前组件的属性(props)中
const mapStateToProps = (state) => ({
  //语法-自定义属性名: state.仓库管理员名称.state中的属性
  cityName: state.mapReducer.cityName
})

// 4.2 把action 操作数据的方法也映射出去(将行为action 连接到store和 当前组件的属性(props)中)
const mapDispatchToProps = (dispatch) => ({  //需要括号因为接的是一个对象 ({方法1，方法2})
  // 获取 当前定位城市
  getCityName() {
    // 派发行为:派发通知给管理员 (会将action 派发到 reducer中)
    // 语法-dispatch(仓库中actionCreator中的方法())
    dispatch(getCityNameCreate());
  }
})


export default connect(mapStateToProps, mapDispatchToProps)(App);